<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <img src="../../assets/img/cqBg.png" alt="" />
      <!--<div class="sort-nav clearfix">
        <strong class="fl">排序：</strong>
        <ul class="fl clearfix">
          <li
            v-for="(item, index) in navList"
            :key="index"
            @click="navTabs(index)"
            :class="[navIndex == index ? 'active' : '']"
          >
            {{ item }}
          </li>
        </ul>
      </div>-->
      <div class="base-box">
        <ul v-if="baseList.length>0">
          <li v-for="(item, index) in baseList" :key="index">
            <div class="product-info fl">
              <p class="product-name">{{ item.name }}</p>
              <p class="time">挂牌时间：{{ item.offerEndTime }}</p>
              <p class="countDown">挂牌倒计时 {{ time(item.offerEndTime) }}</p>
            </div>
            <div class="toAuction" @click="lookDetail(item.id, item.name)">
              去竞拍
            </div>
          </li>
        </ul>

        <div
            v-else
            style="text-align: center; margin-top: 80px; margin-bottom: 80px"
          >
            <img src="../../assets/img/noData.png" />
            <p style="font-size: 14px; color: #666">暂无数据</p>
          </div>

      </div>


      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";

export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage
  },

  data() {
    return {
      startTime: new Date(),
      navList: ["热门资讯", "最新发布", "底价"],
      navIndex: 0,
      baseList: [],
      pageSize: 10,
      total: 0,
      pageNum: 1,
      ticker: null,
      d: "",
      h: "",
      m: "",
      s: ""
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    navTabs(index) {
      this.navIndex = index;
    },
    getList() {
      this.loading = true;
      this.$http(
        "get",
        "/sys/iaPropertyRight/findIaPropertyRightListOfficalByPage.do",
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      )
        .then(res => {
          if (res.code == "0000") {
            var data = res.result;
            var rows = data.rows;
            //首先循环数组 在 正常的情况下这个数组是后台传递过来的 然后将这个数组中的最后截止时间减去当前时间获得时间戳
            for (let i = 0, len = rows.length; i < len; i++) {
              const item = rows[i];
              item.offerEndTime =
                new Date(item.offerEndTime).getTime() - new Date().getTime();
            }
            this.baseList = rows; //将改变后的数组赋值给自定义的数组 然后调用计时器 每秒减去指定字段的时间戳 -1000毫秒
            if (this.ticker) {
              //这一段是防止进入页面出去后再进来计时器重复启动
              clearInterval(this.ticker);
            }
            this.beginTimer(); //启动计时器减指定字段的时间
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getList();
    },
    lookDetail(id, title) {
      this.$router.push({
        path: "/property/detail",
        query: { id: id, title: title }
      });
    },
    beginTimer() {
      //这个计时器是每秒减去数组中指定字段的时间
      this.ticker = setInterval(() => {
        for (let i = 0, len = this.iconlist.length; i < len; i++) {
          const item = this.iconlist[i];
          if (item.pre_at > 0) {
            item.pre_at = item.pre_at - 1000;
          }
        }
      }, 1000);
    },
    time(time) {
      //这个函数是每秒把时间重新计算下
      if (time >= 0) {
        let d = Math.floor(time / 1000 / 60 / 60 / 24);
        let h = Math.floor((time / 1000 / 60 / 60) % 24);
        let m = Math.floor((time / 1000 / 60) % 60);
        let s = Math.floor((time / 1000) % 60);
        return "还有" + d + "天" + h + "小时"
      }
    }
  }
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;
  background: #fff;
  padding-bottom: 30px;
}
.sort-nav {
  margin-top: 20px;
  margin-bottom: 10px;
}
.sort-nav strong {
  font-size: 14px;
  color: #4a4a4a;
  margin-right: 40px;
  margin-left: 70px;
}
.sort-nav ul li {
  font-size: 14px;
  color: #4a4a4a;
  float: left;
  margin-right: 32px;
  cursor: pointer;
}
.sort-nav ul li.active {
  color: #f48d06;
}
.base-box ul {
  width: 1077px;
  margin: 20px auto;
}
.base-box ul li {
  height: 148px;
  padding: 11px 18px 19px 18px;
  box-sizing: border-box;
  margin-bottom: 12px;
  border-bottom: 1px solid #ececec;
  position: relative;
}
.base-box ul li .product-pic {
  width: 141px;
  height: 108px;
  margin-right: 50px;
}
.base-box ul li .product-name {
  font-size: 16px;
  color: #292929;
  margin-top: 9px;
  margin-bottom: 16px;
}
.base-box ul li .time {
  font-size: 13px;
  color: #4a4a4a;
  margin-top: 5px;
  margin-bottom: 13px;
}
.base-box ul li p.countDown {
  background: #f43006;
  color: #fff;
  font-size: 14px;
  padding: 4px 10px;
  display: inline;
}
.product-pic img {
  width: 144px;
  height: 108px;
}
.pagination {
  margin-left: 400px;
}
.toAuction {
  position: absolute;
  right: 50px;
  top: 44px;
  width: 80px;
  height: 38px;
  background: #ee781b;
  border-radius: 2px;
  line-height: 38px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.toAuction:active {
  opacity: 0.8;
}
</style>



